<template>
<!-- 桌面客户端/移动端 -->
    <div class="personnel-statistics-wrap">
        <div class="model-title">{{ modelType == 1 ? '桌面客户端' : '移动端' }}</div>
        <div class="model-content-wrap">
            <div :class="'platform-icon ' + (modelType == 1 ? 'pc-icon' : 'iphone-icon')"></div>
            <!-- 统计 -->
            <div class="static-data-wrap">
                <div class="online-data">
                    <!-- <p class="data-value">{{ onlinePerson }}</p> -->
                    <number-scroll class="data-value" :time="1" :value="onlinePerson"></number-scroll>
                    <p class="data-title">当前在线</p>
                </div>
                <div class="user-data">
                    <!-- <p class="data-value">{{ userPerson }}</p> -->
                    <number-scroll class="data-value" :time="1" :value="userPerson"></number-scroll>
                    <p class="data-title">使用人数</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getUserNumStatistic  } from '@/api/platMonitor'
import NumberScroll from '@/libs/NumberScroll/Main'

export default {
    name: 'PersonnelStatistics',
    props: {
        type: {
            default() {
                return 1;
            }
        }
    },
    components: {
        NumberScroll
    },
    data() {
        return {
            modelType: this.type, // 类型：1-桌面客户端  2-移动端
            onlinePerson: 0,
            userPerson: 0
        }
    },
    created() {
        this.getUserTotal()
    },
    methods: {
        // 随机生成当前在线人数 按照最大值的50%
        randomOnlinePerson(max) {
            let value = Math.ceil(Math.random() * (max*0.5)) 

            this.onlinePerson = value
        },
        getUserTotal() {
            let that = this
            getUserNumStatistic({
                orgIds: that.$store.state.userInfo.organizationIds,
                platformId: that.$store.state.userInfo.org.id
            }).then(res => {
                if(res.status === 200) {
                    that.userPerson = that.modelType == 1 ? res.data.pcCount : res.data.appCount
                    that.randomOnlinePerson(that.userPerson)
                }
            })
        }
    }
}
</script>
<style lang="scss">
.personnel-statistics-wrap {
    width: 100%;
    height: 100%;
    .model-content-wrap {
        display: flex;
        width: 100%;
        height: calc(100% - 31px);
        .platform-icon {
            width: 55%;
            &.pc-icon {
                background: url(../../../../../assets/images/detailPage/pc-icon.png) center bottom no-repeat;
            }
            &.iphone-icon {
                background: url(../../../../../assets/images/detailPage/phone-icon.png) center bottom no-repeat;
            }
        }
        .static-data-wrap {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text-align: left;
            width: 40%;
            .data-value {
                font-size: 34px;
                color:rgba(82,219,241,1);
            }
            .data-title {
                font-size: 20px;
                color:rgba(163,190,221,.3);
            }
            .user-data {
                .data-value {
                    color:rgba(104,169,255,1)
                }
            }
        }
    }
}
</style>
